<template>
  <div class="realm-info-lay">
    <el-form :model="realmInfo" ref="refForm" :rules="rules">
      <el-form-item label="领域名称" :label-width="labelWid" prop="realmName">
        <el-input v-model="realmInfo.realmName" />
      </el-form-item>
      <el-form-item label="领域标识" :label-width="labelWid">
        <el-input v-model="realmInfo.realmCode"/>
      </el-form-item>
      <el-form-item label="组织名称" :label-width="labelWid">
        <el-input v-model="realmInfo.orgName"/>
      </el-form-item>
      <el-form-item label="负责人姓名" :label-width="labelWid">
        <el-input v-model="realmInfo.orgContact"/>
      </el-form-item>
      <el-form-item label="负责人电话" :label-width="labelWid">
        <el-input v-model="realmInfo.phone"/>
      </el-form-item>
      <el-form-item label="数据插件" :label-width="labelWid">
        <el-input v-model="realmInfo.userUrl"/>
      </el-form-item>
      <el-form-item label="领域描述" :label-width="labelWid">
        <el-input type="textarea" v-model="realmInfo.desc" :rows="3" />
      </el-form-item>
    </el-form>
    <div class="realm-footer">
        <el-button type="danger" @click="onCancel">取消</el-button>
        <el-button type="primary" style="margin-left: 32px;" @click="onSave">保存</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from "vue";
import {useStore} from "@/stores";
import {lookupRealm, saveRealm} from "@/apis";
import {msgError, msgInfo} from "@/utils/InfoUtil";

const labelWid = ref(90);
const oldInfo = ref();
const refForm = ref();
const realmInfo = ref({});

const rules = reactive({
  realmName: [{required: true, message: '请输入领域名称', trigger: ['blur', 'change']},],
})

const onCancel = () => {
  realmInfo.value = {...oldInfo.value};
}

const onSave = async () => {
  if (await refForm.value.validate()) {
    const result = await saveRealm(realmInfo.value);
    if (result.code === 0) {
      msgInfo('保存领域信息成功！');
      oldInfo.value = {...realmInfo.value};
    } else {
      msgError(result.message);
    }
  }
}

const refresh = async () => {
  const result: any = await lookupRealm({
    id: useStore().getCurrentRealms().id
  })

  if (result) {
    realmInfo.value = result.data || {};
  } else {
    realmInfo.value = {};
  }

  oldInfo.value = {...realmInfo.value};
}

onMounted(() => {
  refresh();
})

defineExpose({
  refresh,
})

</script>

<style scoped>
.realm-info-lay {
    display: flex;
    flex-direction: column;
    margin: 16px 32px;
    justify-content: flex-start;
    width: 50%;
}

.inherit-item {
  display: flex;
  flex-direction: row;
  margin: 0 8px;
  justify-items: center;
  align-items: center;
}

.realm-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 16px 0;
}
</style>
